<template>
    <div class="heart">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/company/companyInfo' }">企业</el-breadcrumb-item>
        <el-breadcrumb-item
          ><a>用电设备监控</a></el-breadcrumb-item
        >
      </el-breadcrumb>
      <div class="search">
        <div class="inp">
          <span style="margin-right: 15px">公司名称</span>
          <el-input v-model="companyName" style="width: 240px; margin-right: 40px" placeholder="请输入公司名称" />
          <span style="margin-right: 15px">设备MIN</span>
          <el-input v-model="min" style="width: 240px" placeholder="请输入设备MIN" />
        </div>
        <el-button type="primary" style="width: 80px;" @click="search">查询</el-button>
      </div>
      <el-card style="height: 70px; margin-top: 20px;" shadow="hover">
        <el-button type="primary" style="width: 100px;" @click="openDialog">添加用电设备</el-button>
        <el-dialog v-model="dialog" title="添加数采仪设备" width="800" destroy-on-close>
          <div class="add">
            <div class="addItem">
              <span>企业名称：</span><el-select v-model="elecComName" style="width: 60%">
                <el-option
                    v-for="item in comData"
                    :key="item.comName"
                    :label="item.comName"
                    :value="item.comName"
                  />
              </el-select>
            </div>
            <div class="addItem">
              <span>设备名：</span><el-input style="width: 60%" v-model="elecName"></el-input>
            </div>
            <div class="addItem">
              <span>设备编号：</span><el-input style="width: 60%" v-model="elecMin"></el-input>
            </div>
            <div class="addItem">
              <span>总功率：</span><el-input style="width: 60%" v-model="elecPower"></el-input>
            </div>
            <div class="addItem">
              <span>设备运营商：</span><el-input style="width: 60%" v-model="elecOperator"></el-input>
            </div>
            <div class="addItem">
              <span>图片：</span><el-upload
              class="avatar-uploader"
              action="http://up-z2.qiniup.com"
              :show-file-list="false"
              :data="qndata"
              :on-success="handleSuccess"
            >
              <img v-if="elecImg" :src="elecImg" class="avatar" />
              <el-icon  class="avatar-uploader-icon" v-if="!elecImg"><Plus /></el-icon>
            </el-upload>
            </div>
          </div>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="dialog = false">取消</el-button>
              <el-button type="primary" @click="addEquip">
                添加
              </el-button>
            </div>
          </template>
        </el-dialog>
      </el-card>
      <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%; margin-top: 20px"
      @selection-change="handleSelectionChange"
      @sort-change="handleSort"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="创建日期" sortable >
        <template #default="scope">{{ scope.row.createTime.substring(0,10) }}</template>
      </el-table-column>
      <el-table-column prop="elecComName" label="企业名称" />
      <el-table-column prop="elecName" label="设备名" />
      <el-table-column prop="elecMin" label="设备编号" />
      <el-table-column prop="elecPower" label="总功率" />
      <el-table-column prop="elecOperator" label="设备运营商" />
      <el-table-column label="图片">
        <template #default="scope">
          <img :src="scope.row.elecImg" style="width: 50px; height: 50px" />
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="55">
        <template #default="scope">
          {{ scope.row.elecStatus == 0 ? '正常' : '禁用' }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button  @click="banElec(scope.$index, scope.row)" v-if="scope.row.elecStatus == 0" size="small"
            >禁用</el-button
          >
          <el-button  @click="useElec(scope.$index, scope.row)" v-if="scope.row.elecStatus == 1"  type="primary" size="small"
          >启用</el-button
        >
          <el-button
            type="danger"
            size="small"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <Pagination v-model:page="page" :total="total" @pagination="getPagData" />
    </div>
    </div>
      
  </template>
  <script lang="ts" setup>
  import { ref, watch, onMounted, reactive,  } from 'vue'
  import Pagination from '../../components/Pagination.vue'
  import http from '../../http/http'
  import { ElMessage } from 'element-plus'
  import type { UploadProps, UploadUserFile } from 'element-plus'
  import { Plus } from '@element-plus/icons-vue'
  let companyName =  ref('')
    let min = ref()
    let order = ref('desc')
    let size = ref(10)
    let total = ref(100)
    let page = ref(1)
    let tableData = ref()
    let getData = (page:any,size:any,comName:any,order:any,min:any)=>{
      http.get('/api/electricity/page',{params:{
        page,
        size,
        comName,
        order,
        min
      }}).then((res)=>{
          console.log(222,res)
          if(res.data.code<300){
            tableData.value = res.data.records
            total.value = res.data.count - 0
          }else{
            ElMessage.error('查询数据失败！')
          }
      },(err)=>{
        console.log(err)
      })
    }
    getData(page.value,size.value,companyName.value,order.value,min.value)
    let getPagData = (page:any,size:any)=>{
      getData(page,size,companyName.value,order.value,min.value)// console.log(page,size)
    }
    let search = ()=>{
    getData(page.value,size.value,companyName.value,order.value,min.value)
    }
    let banElec = (index:any,row:any)=>{
    http.post('/api/electricity/update',{
      elecId: row.elecId,
      elecStatus: 1
    }).then((res)=>{
      console.log(res)
      if(res.data.code < 300){
        getData(page.value,size.value,companyName.value,order.value,min.value)
        ElMessage.success('禁用成功')
      }else{
        ElMessage.error('禁用失败')
      }
    })
  }
  let useElec = (index:any,row:any)=>{
    http.post('/api/electricity/update',{
      elecId: row.elecId,
      elecStatus: 0
    }).then((res)=>{
      console.log(res)
      if(res.data.code < 300){
        getData(page.value,size.value,companyName.value,order.value,min.value)
        ElMessage.success('启用成功')
      }else{
        ElMessage.error('启用失败')
      }
    })
  }
  let handleDelete = (index:any,row:any)=>{
    let arr = []
    arr.push(row.elecId)
    http.delete('/api/electricity/delete',{
      params:{
        idList: arr.join(',')
      }
    }).then((res)=>{
      // console.log(res)
      getData(page.value,size.value,companyName.value,order.value,min.value)
    },(err)=>{
      console.log(err)
    })
  }
  let  dialog = ref(false)
    let openDialog = ()=>{
      dialog.value = true
      // getAll()
    }
    let comData = ref()
    let elecComName = ref()
    let elecName = ref()
    let elecMin = ref()
    let elecPower = ref()
    let elecOperator = ref()
    let elecImg = ref()
    http.get('/api/company/list').then((res)=>{
        // console.log(res)
        if(res.data.code<300){
          comData.value = res.data.records
        }
    })
    let addEquip = ()=>{
      http.post('/api/electricity/insert',{
        elecComName: elecComName.value,
        elecName: elecName.value,
        elecMin: elecMin.value,
        elecPower: elecPower.value,
        elecOperator: elecOperator.value,
        elecImg: elecImg.value
      }).then((res)=>{
        if(res.data.code<300){
          ElMessage.success('添加成功')
          dialog.value = false
          getData(page.value,size.value,companyName.value,order.value,min.value)
        }else{
          ElMessage.error(res.data.msg)
          dialog.value = false
        }
      })
    }
    let handleSort = (data: {column: any, prop: string, order: any })=>{
      console.log(data)
    }
    const dialogImageUrl = ref('')
  const dialogVisible = ref(false)
  let qndata = ref({
  token:''
  })
  let getToken = ()=>{
  http.get('/api/upload/token').then((res)=>{
      // console.log(res);
      qndata.value = {
        token: res.data.qiniuToken
      }
  },(err)=>{
    console.log(err)
  })
  }
  getToken()
  const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles)
  }

  const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url!
    dialogVisible.value = true
  }
  const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
  }
  let handleSuccess = (res:any,file:any)=>{
    console.log(res,file)
    elecImg.value = 'http://scp78067d.hn-bkt.clouddn.com/' + res.key
  }
  let addRep = ()=>{

  }
  </script>
  <style>
    .heart{
      width: 95%;
      margin: 20px auto;
    }
    .search{
      margin-top: 50px;
      display: flex;
      justify-content: space-around;
    }
    .pagination{
      margin-top: 40px;
      display: flex;
      justify-content: center;
    }
    .addItem{
      width: 70%;
      margin: 10px auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .avatar-uploader .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }
    
    .avatar-uploader .el-upload:hover {
      border-color: var(--el-color-primary);
    }
    
    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      text-align: center;
    }
    .avatar{
      width: 100px;
      height: 100px;
      
    }
  </style>